<template>
    <div ref="calcEcharts2Ref" style="width:100%;height: 100%;"></div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import tipImage from '../../assets/images/tooltip.png';
import { formatTipVlaue } from '@/utils';
const props = defineProps({
    xData: {
        type: Array,
        required: true
    },
    yData: {
        type: Array,
        required: true,
    },
    unit: {
        type: String,
        default: '人'
    },
    fixed: {
        type: Number,
        default: 1
    },
    tipLabel: {
        tyep: String,
        default: ''
    }
});
const calcEcharts2Ref = ref();
let myChart = null;

const colors = ["#9E87FF", "#73DDFF", "#67C23A", "#E6A23C"];
const option = {//Echarts参数设置
    // backgroundColor: '#fff',
    title: {
        // text: '信息传播趋势图',
        textStyle: {
            fontSize: 12,
            fontWeight: 400
        },
        left: 'center',
        top: '5%'
    },
    // legend: {
    //     icon: 'rect', //图例的图标形状
    //     top: '5%',
    //     right: '5%',
    //     itemHeight: 6, //图例的图标高度
    //     itemWidth: 12, //图例的图标宽度
    //     itemGap: 20,
    //     textStyle: {
    //         color: '#556677'
    //     }
    // },
    tooltip: {
        // trigger: 'axis',
        // axisPointer: {
        //     label: {
        //         show: true,
        //         backgroundColor: '#fff',
        //         color: '#556677',
        //         borderColor: 'rgba(0,0,0,0)',
        //         shadowColor: 'rgba(0,0,0,0)',
        //         shadowOffsetY: 0
        //     },
        //     lineStyle: {
        //         width: 0
        //     }
        // },
        // backgroundColor: '#fff',
        // textStyle: {
        //     color: '#5c6c7c'
        // },
        // padding: [10, 10],
        // extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        show: true,
        trigger: 'axis',
        padding: [0, 0, 0, 0],
        axisPointer: {
            lineStyle: {
                width: 1,
                type: 'solid',
                color: '#00D1FF'
            }
        },
        backgroundColor: 'transparent',
        borderColor: 'transparent',
        shadowColor: 'transparent',
        formatter: (val) => {
            let value = formatTipVlaue(val[0].data, props.fixed);
            return `<div style="width:150px;height:55px; background:url(${tipImage}) no-repeat;background-size:contain;padding:5px 10px;">
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center ;margin-top:0px">
                                <span>${props.tipLabel} :&nbsp;</span>
                                <span>${value} ${props.unit}</span>   
                              </p>
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center; margin-top:5px">
                                <span>时间 :&nbsp;</span>
                                <span>第${val[0].name}秒</span> 
                              </p>
                         </div>`
        },
    },
    grid: {
        left: '5%',
        right: '5%',
        top: '5%',
        bottom: '5%',
        containLabel: true,
    },
    xAxis: [{
        type: 'category',
        show: false,
        data: [],//X轴要显示的数据
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)', //x轴颜色
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            color: '#99C3E5', //坐标轴字颜色
            margin: 15
        },
        axisPointer: {
            label: {
                padding: [11, 5, 7],
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#fff' // 0% 处的颜色
                    }, {
                        offset: 0.9,
                        color: '#fff' // 0% 处的颜色
                    }, {
                        offset: 0.9,
                        color: '#33c0cd' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#33c0cd' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        boundaryGap: false
    }],
    yAxis: [{
        type: 'value',
        interval: 100000,
        showMinLabel: true,
        showMaxLabel: true,
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
        },
        axisLabel: {
            color: '#99C3E5'
        },
        splitLine: {
            show: true,
            lineStyle: {
                width: 0.2,
                color: '#2B7BD6',
                type: 'dashed'
            },
        },
    }],
    series: []//曲线数据
}

watch([() => props.xData, () => props.yData], (val, oldVal) => {
    if (myChart) {
        setEchartsOption(myChart, val[0], val[1]);
    }
});
onMounted(() => {
    myChart = echarts.init(calcEcharts2Ref.value);
    setEchartsOption(myChart, props['xData'], props['yData']);

    window.addEventListener('resize', function () {
        myChart.resize();
    });
    // let i = 0
    // setInterval(function () {
    //     console.log(i)
    //     i = i === xData.length ? 0 : i + 1
    //     myChart.dispatchAction({
    //         type: 'showTip',
    //         seriesIndex: 0,  // 显示第几个series
    //         dataIndex: i // 显示第几个数据
    //     });
    // }, 1000)
})

const setEchartsOption = (myChart, xData, yData) => {
    const series = [];
    if (yData) {
        for (let index = 0; index < yData.length; index++) {
            const item = yData[index];
            series.push({
                name: item['name'],
                type: 'line',
                data: item['dataset'],
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {
                    width: 1,
                    color: colors[index],
                    shadowColor: 'rgba(158,135,255, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    color: colors[index],
                    borderColor: colors[index]
                }
            })
        }
    }

    option['xAxis'][0]['data'] = xData;
    option['series'] = series;
    myChart.setOption(option);
}
</script>
<style scoped></style>